<template>
  <div>
    <van-row
      style="height: 350px; line-height: 350px; color: aqua; font-size: 30px">
      <van-col span="24"> 24h在线洗车 </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="mobile"
            label="手机号"
            placeholder="请输入手机号" />
          <van-field
            v-model="number"
            center
            clearable
            label="获取验证码"
            placeholder="请输入短信验证码">
            <template #button>
              <van-button v-if="codeShow" round @click="getPhoneCode()"
                >获取验证码</van-button
              >
              <van-button v-if="!codeShow" round
                >{{ count }}秒后重试</van-button
              >
            </template>
          </van-field>
          <van-field
            v-model="password1"
            label="密码"
            placeholder="请输入密码" />
          <van-field
            v-model="password2"
            label="确认密码"
            placeholder="请确认密码" />
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row style="margin-top: 15px; font-size: 13px">
      <van-col span="8" style="text-align: left; margin-left: 15px">
        <a @click="jump('login')">登录 </a>
      </van-col>
      <van-col span="6"></van-col>
      <van-col span="8" style="text-align: right">
        <a @click="jump('register')">注册 </a>
      </van-col>
    </van-row>

    <van-button
      round
      type="info"
      style="margin-top: 10px; width: 80%"
      @click="updateLogin"
      >确认修改</van-button
    >
  </div>
</template>

<script>
export default {
  props: {},
  mounted() {},
  data() {
    return {
      //181-360 注册
      mobile: "", //手机号
      password1: "", //密码
      password2: "", //确认密码
      number: "", //验证码
      count: "", //计时器
      codeShow: true, //验证码判
      timer: null, //计时器
    };
  },
  methods: {
    jump(uri) {
      this.$router.push(uri);
    },
    // 验证码发送
    getPhoneCode() {
      var _this = this;
      if (
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.mobile
        )
      ) {
        this.$http
          .get("/tuser/queryByMobile?mobile=" + this.mobile)
          .then(function (response) {
            if (response.data.data == 200 && response.data.code == 200) {
              _this.$http
                .post("/tuser/createCode?mobile=" + _this.mobile)
                .then(function (response) {
                  if (response.data.code == 200) {
                    //计时
                    const TIME_COUNT = 60;
                    _this.$message({
                      type: "success",
                      message: "验证码已发送!",
                    });
                    if (!_this.timer) {
                      _this.count = TIME_COUNT;
                      _this.codeShow = false;
                      _this.timer = setInterval(() => {
                        if (_this.count > 0 && _this.count <= TIME_COUNT) {
                          _this.count--;
                        } else {
                          _this.codeShow = true;
                          clearInterval(_this.timer);
                          _this.timer = null;
                        }
                      }, 1000);
                    }
                  } else {
                    _this.$message.error("未生成");
                  }
                });
            } else {
              _this.$message.error("手机号不存在");
            }
          });
      } else {
        this.$message.error("手机号错误,验证码无法生成");
      }
    },
    updateLogin() {
      var _this = this;
      console.log("注册。。。。。。。。。。。。");
      if (this.mobile == "") {
        _this.$message.error("手机号不能为空");
        return;
      } else if (this.password1 == "") {
        _this.$message.error("密码不可以为空");
        return;
      } else if (this.password2 == "") {
        _this.$message.error("请再次输入密码");
        return;
      } else if (this.password1 != this.password2) {
        _this.$message.error("两次密码需保持一致！");
        return;
      } else if (this.number == "") {
        _this.$message.error("验证码不能为空");
        return;
      }
      //用户注册
      this.$http
        .post("/tuser/yanzhen?number=" + this.number)
        .then(function (response) {
          if (response.data.code == 200 && response.data.data == 200) {
            console.log(response);
            _this.addAAA();
          } else {
            _this.$message.error("验证码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("验证码错误。。。");
        });
    },
    addAAA() {
      var _this = this;
      this.$http
        .post("/tuser/ChangePassword?mobile="+this.mobile+"&password="+this.password2)
        .then(function (response) {
          if (response.data.code == 200) {
            _this.jump("login");
          } else {
            _this.$message.error("用户名或者密码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("你错了。。。");
        });
    },
  },
};
</script>

<style>
.nav_spj {
  height: 350px;
  background-color: aqua;
}
</style>
